@import '../../../styles/util'

.fui-calendar-body
  min-width: 3rem

  &-label
    height: 0
    line-height: 0
    text-align: left
    padding: 0 0.5rem

  &-cell
    position: relative
    height: 2.625rem
    width: 2.625rem
    padding: 0
    line-height: 0
    text-align: center
    outline: 0

  &-cell-content
    position: relative
    display: flex
    align-items: center
    justify-content: center
    width: 90%
    height: 90%
    background-color: $bg-body
    font-size: 0.75rem
    line-height: 1
    padding: 0
    outline: none
    border: none
    opacity: 0.87
    cursor: pointer
    user-select: none
    color: $text-default

    .ripple-out
      background-color: $brand-primary
      border-radius: 50%
      height: 2.125rem
      width: 2.125rem
      left: 0.125rem
      opacity: 0
      position: absolute
      top: 0.1rem
      transform: scale(0)
      transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms

    span
      z-index: 1
      position: relative

    &:hover
      .ripple-out
        opacity: 0.6
        transform: scale(0.9)
      span
        color: $text-reverse

  .year-view-cell-content
    .ripple-out
      border-radius: 0.25rem
      width: 100%
      height: 100%

    span
      margin-top: .4rem


  &-today
    font-weight: bold
    font-size: 0.875rem
    color: $brand-primary

  &-selected
    color: $text-reverse

    .ripple-out
      opacity: 1
      transform: scale(0.9)

    &:hover
      .ripple-out
        opacity: 1

  &-disabled
    opacity: 0.5
    cursor: default
    pointer-events: none
